<!--
 * @Author: 勿忘 208760845@qq.com
 * @Date: 2023-02-02 16:32:43
 * @LastEditors: 勿忘 208760845@qq.com
 * @LastEditTime: 2023-02-10 16:20:43
 * @FilePath: \mosturnacs-pc\src\components\UploadImage\src\BasicUploadImage.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="custom-upload-img">
    <div class="upload-img" v-if="imgList">
      <div v-for="(item, index) in imgList" :key="index" class="upload-img-list">
        <Image :src="item" :width="100" :height="100">
          <template #previewMask>
            <fullscreen-outlined />

            <delete-outlined @click="delImg(index)" style="margin-left: 10px" />
          </template>
        </Image>
      </div>
    </div>

    <div class="clearfix">
      <UploadDragger
        v-model:fileList="fileList"
        name="file"
        :multiple="true"
        :customRequest="beforeUpload"
        :show-upload-list="false"
      >
        <plus-outlined />
        <div class="ant-upload-text">Upload</div>
      </UploadDragger>
    </div>
  </div>
</template>
<script lang="ts">
  import { PlusOutlined, DeleteOutlined, FullscreenOutlined } from '@ant-design/icons-vue';
  import { defineComponent, ref, watch, toRefs } from 'vue';
  import { UploadDragger, Image } from 'ant-design-vue';
  import { uploadFile } from '/@/api/work/file/uploadFile';

  export default defineComponent({
    name: 'BasicUploadImage',
    components: {
      DeleteOutlined,
      FullscreenOutlined,
      PlusOutlined,
      UploadDragger,
      Image,
    },
    props: {
      listType: {
        type: Boolean as PropType<boolean>,
        default: false,
      },
      modelValue: {
        type: String as PropType<string>,
        default: '',
      },
    },
    emits: ['update:modelValue'],
    setup(props, { emit }) {
      var imgList = ref<string[]>([]);
      const { listType } = toRefs(props);
      console.log(listType, 7788);
      watch(
        () => props.modelValue,
        (value = '') => {
          console.log(555, value);
          imgList.value = value ? value.split(',') : [];
        },
        { immediate: true },
      );
      const beforeUpload = (file) => {
        //const status = info.file.status;
        var formData = new FormData();
        formData.append('file', file.file);
        uploadFile(formData).then((res) => {
          if (listType) {
            imgList.value.push(res[0].FileUrl);
          } else {
            imgList.value = [res[0].FileUrl];
          }

          const cloneImgList = JSON.parse(JSON.stringify(imgList.value)).join(',');
          emit('update:modelValue', cloneImgList);
        });
      };
      const delImg = (index) => {
        imgList.value.splice(index, 1);
        const cloneImgList = JSON.parse(JSON.stringify(imgList.value)).join(',');
        emit('update:modelValue', cloneImgList);
      };
      return {
        beforeUpload,
        delImg,
        fileList: ref([]),
        imgList,
      };
    },
  });
</script>
<style lang="less" scoped>
  .custom-upload-img {
    display: flex;
    flex-wrap: wrap;
  }

  .upload-img {
    display: flex;

    .upload-img-list {
      margin: 5px;
    }
  }

  .clearfix {
    margin: 6px;
    width: 100px;
    height: 100px;
  }
</style>
